<template>
    <div ref="target">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { useElementStyle } from '@vueuse/motion';
import { ref } from 'vue';
const p = defineProps<{ columns: number, columnGap: number }>()
const target = ref<HTMLElement>()
const { style } = useElementStyle(target, (e) => {
    e.columns = p.columns
    if (p.columnGap) {
        e.columnGap = p.columnGap + 'px'
    }
})



</script>
<style scoped>
.masonry {
    break-inside: avoid;
}
</style>